<template>
    <div class="parent">
        <header class="header">
            <x-header class="headerContent" :left-options="{backText: ''}"><span class="title">账户管理</span></x-header>
        </header>
        <main class="main">
            <ul class="list">
                <li class="listItem">
                    <div class="user">
                        <label for="">姓名:</label>
                        <span>{{userName}}</span>
                    </div>
                    <div class="pic">
                        <img src="../../assets/121.jpg" alt="">
                    </div>
                </li>
            </ul>
            <div>
                <group class="group">
                    <cell class="listItem">
                        <div class="cont sp">
                            <label for="">地址: </label>
                            <span>北京市朝阳区北苑</span>
                        </div>
                    </cell>
                    <cell class="listItem" link="/Home/Iphone">
                        <div class="cont">
                            <label for="">手机号码: </label>
                            <span>{{iphone}}</span>
                        </div>
                    </cell>
                    <cell class="listItem">
                        <div class="cont sp">
                            <label for="">电子邮箱: </label>
                            <span>13910102455@163.com</span>
                        </div>
                    </cell>
                    <cell class="listItem" link="/Home/Password">
                        <div class="cont">
                            <label for="">密码: </label>
                            <span>****</span>
                        </div>
                    </cell>
                </group>
            </div>
        </main>
    </div>
</template>
<script>
import { XHeader, Group, Cell } from 'vux'
export default {
    name: 'Account',
    data () {
        return {
            iphone: '',
            userName: ''
        }
    },
    components: {
        XHeader,
        Group, 
        Cell
    },
    created () {
        this.iphone = JSON.parse(sessionStorage.getItem('userInfo')).loginIphone
        this.userName = JSON.parse(sessionStorage.getItem('userInfo')).page.fullName
    }
}
</script>
<style scoped lang="less">
.parent{
    width: 100%;
    height: 100%;
    background: rgba(250, 250, 250, 1);
}
.header{
    width: 100%;
}
.title{
    font-size: 16px;
    font-family:ArialMT;
    color:rgba(255,255,255,1);
    line-height:18px;
    letter-spacing:1px;
}
.headerContent{
    width: 100%;
    background:linear-gradient(135deg,rgba(255,199,38,1) 0%,rgba(249,151,22,1) 100%);
    
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.list{
    width: 100%;
    height: 2.666667rem;
    .listItem{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0 .666667rem;
        background: #fff;
        .user{
            font-size:12px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(82,82,82,1);
            line-height:17px;
            letter-spacing:1px;
        }
        .pic{
            width: 1.893333rem;
            height: 1.893333rem;
            border: 1px solid white;
            border-radius: 50%;
            img{
                display: block;
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }
        }
    }
}
.group{
    width: 100%;
    margin-top: -0.4rem;
    .listItem{
        width: 100%;
        height: 1.333333rem;
        .cont{
            width: 8rem;
            height: 1.333333rem;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            margin-left: -0.4rem;
            span{
                display: block;
                width: 6.666667rem;
                height: 100%;
                font-size:12px;
                font-family:PingFangSC-Regular;
                font-weight:400;
                color:rgba(82,82,82,1);
                line-height:17px;
                letter-spacing:1px;
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: center;
            }
            label{
                display: block;
                width: 1.733333rem;
                height: 100%;
                font-size:12px;
                font-family:PingFangSC-Regular;
                font-weight:400;
                color:rgba(82,82,82,1);
                line-height:17px;
                letter-spacing:1px;
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: center;
            }
        }
        .sp{
            width: 8.373333rem;
            span{
                margin-left: -0.09rem;
            }
        }
    }
}
</style>
